<div class="user-manager">
  <div class="user-manager-title">
     <span>
       用户管理
     </span>
  </div>
  <div class="user-manager-header">
    <div class="user-manager-search">
      <div class="ui-inputgroup" >
        <input type="text" pInputText  placeholder="搜索"/>
        <button pButton type="button" icon="pi pi-search" class="ui-button-warn" (click)="searchDataClick()"></button>
      </div>
    </div>
    <div class="user-manager-button">
      <button pButton type="button" label="添加用户" class="ui-button-rounded" (click)="showAddUserClick()"></button>
      <button pButton type="button" label="批量删除" class="ui-button-rounded" (click)="delUserInfoClick()"></button>
    </div>
  </div>
  <div class="user-manager-table">
    <app-check-table-btn [select]="userSelect"   (selectData)="selectData($event)" [option]="optionTable" (detail)="DetailClick($event)"></app-check-table-btn>
  </div>
  <div class="user-manager-pagination">
    <app-pagination [option]="pageOption" (clickEvent)="clickEvent($event)"></app-pagination>
  </div>
<!--  <p-toast position="top-center" key="toast"></p-toast>-->
<!--  <p-confirmDialog header="Confirmation" acceptLabel="取消" rejectLabel="确认选择" acceptIcon="" rejectIcon=""></p-confirmDialog>-->
  <p-dialog header="信息添加" [(visible)]="showAddUserDialog" [style]="{width: '700px'}">
    <form [formGroup]="addUser">
      <div class="ui-g ui-md ui-fiuld">
        <div class="ui-g-12 ui-md-12">
          <div class="ui-g-2 ui-md-2"></div>
          <div class="ui-g-8 ui-md-8" style="line-height: 4.4vh">
            <div class="ui-g-4 ui-md-4 right">
              <span style="color: #FF8A9A">*</span>身份证号：
            </div>
            <div class="ui-g-8 ui-md-8 ">
              <div class="ui-md-12 ui-g-12 dialog-input">
                <input pInputText type="text" formControlName="idCardNo" placeholder="请输入身份证号"/>
                <p-message severity="error" text="请输入合法的身份证号" *ngIf="!addUser.controls['idCardNo'].valid&&addUser.controls['idCardNo'].dirty"></p-message>
              </div>
            </div>
          </div>
        </div>
        <div class="ui-md-12 ui-g-12">
          <div class="ui-g-2 ui-md-2"></div>
          <div class="ui-g-8 ui-md-8" style="line-height: 4.4vh">
            <div class="ui-g-4 ui-md-4 right">
              <span style="color: #FF8A9A">*</span>是否启用：
            </div>
            <div class="ui-g-8 ui-md-8 dialog-input">
             <div class="ui-g-12 ui-md-12" >
               <p-radioButton name="groupname1" value="1" label="启用"  formControlName="enabled" [ngStyle]="{marginRight: '1vw'}"></p-radioButton>
               <p-radioButton name="groupname1" value="0" label="不启用" formControlName="enabled"></p-radioButton>
             </div>
            </div>
          </div>
        </div>
        <div class="ui-g-12 ui-md-12">
          <div class="ui-g-2 ui-md-2"></div>
          <div class="ui-g-8 ui-md-8" style="line-height: 4.4vh">
            <div class="ui-g-4 ui-md-4 right">
              <span style="color: #FF8A9A">*</span>角色：
            </div>
            <div class="ui-g-8 ui-md-8 dialog-input">
              <div class="ui-g-6 ui-md-6" *ngFor="let item of rolesList" >
                <p-radioButton name="groupname" [value]="item.id" [label]="item.roleName"  formControlName="sysUserRoleList"  [ngStyle]="{marginRight: '1vw'}"></p-radioButton>
              </div>
<!--              <p-radioButton name="groupname" value="不启用" label="不启用" formControlName="enabled"></p-radioButton>-->
            </div>
          </div>
        </div>
      </div>
    </form>
    <p-footer>
      <button class="dialog-btn" (click)="showAddUserDialog = false;resetAllData()">取消</button>
      <button class="dialog-btn" (click)="addUserInfoClick()">确认选择</button>
    </p-footer>
  </p-dialog>
  <p-dialog header="信息编辑" [(visible)]="showEditUserDialog" [style]="{width: '700px'}" (onHide)="showEditUserDialog = false;resetAllData()">
    <form [formGroup]="addUser">
      <div class="ui-g ui-md ui-fiuld">
        <div class="ui-md-12 ui-g-12">
          <div class="ui-g-2 ui-md-2"></div>
          <div class="ui-g-8 ui-md-8" style="line-height: 4.4vh">
            <div class="ui-g-4 ui-md-4 right">
              <span style="color: #FF8A9A">*</span>是否启用：
            </div>
            <div class="ui-g-8 ui-md-8 dialog-input">
              <div class="ui-g-12 ui-md-12" >
                <p-radioButton name="groupname1" value="1" label="启用"  formControlName="enabled" [ngStyle]="{marginRight: '1vw'}"></p-radioButton>
                <p-radioButton name="groupname1" value="0" label="不启用" formControlName="enabled"></p-radioButton>
              </div>
            </div>
          </div>
        </div>
        <div class="ui-g-12 ui-md-12">
          <div class="ui-g-2 ui-md-2"></div>
          <div class="ui-g-8 ui-md-8" style="line-height: 4.4vh">
            <div class="ui-g-4 ui-md-4 right">
              <span style="color: #FF8A9A">*</span>角色：
            </div>
            <div class="ui-g-8 ui-md-8 dialog-input">
              <div class="ui-g-6 ui-md-6" *ngFor="let item of rolesList" >
                <p-radioButton name="groupname" [value]="item.id" [label]="item.roleName"  formControlName="sysUserRoleList"  [ngStyle]="{marginRight: '1vw'}"></p-radioButton>
              </div>
              <!--              <p-radioButton name="groupname" value="不启用" label="不启用" formControlName="enabled"></p-radioButton>-->
            </div>
          </div>
        </div>
      </div>
    </form>
    <p-footer>
      <button class="dialog-btn" (click)="showEditUserDialog = false;resetAllData()">取消</button>
      <button class="dialog-btn" (click)="updateUserInfoClick()">确认选择</button>
    </p-footer>
  </p-dialog>
</div>
